<template>
	<view class="page">
		<view class="flex text-df  justify-between bg-white type-box">
			<view class="text-lg flex padding-tb" style="color: #4D4D4D;margin: 0 auto;">
				<view>
					<view style="width: 32rpx;height: 20rpx;margin: 0 auto;">
					</view>
					<view class="jindu"></view>
					<text class="wz" style="color: #4E8CEE;">选择入驻类型</text>
				</view>
				<view>
					<view style="width: 32rpx;height: 20rpx;margin: 0 auto;">
					</view>
					<view class="jindu jindu2"></view>
					<text class="wz" style="color: #4E8CEE;">选择认证类型</text>
				</view>
				<view>
					<view style="width: 32rpx;height: 20rpx;margin: 0 auto;">
						<image src="../../static/sanjiao.png" mode="widthFix"></image>
					</view>
					<view class="jindu jindu3"></view>
					<text class="wz" style="color: #4E8CEE;">填写认证材料</text>
				</view>
			</view>
		</view>
		<view style="" class="flex margin">
			<image class="image" style="width: 32rpx;height: 32rpx;" src="../../../user/static/checked.png">
			</image>
			<view class="text-333" style="margin-left: 10rpx;line-height: 30rpx;">已选【{{title}}】</view>
		</view>
		<view style="margin-bottom: 40rpx;" class="flex margin">
			<image class="image" style="width: 32rpx;height: 32rpx;" src="../../../user/static/checked.png">
			</image>
			<view class="text-333" style="margin-left: 10rpx;line-height: 30rpx;">已选【{{title2}}】</view>
		</view>
		<view class="margin text-blod" style="margin: 60rpx 34rpx 34rpx 10rpx;font-size: 36rpx;">店铺信息</view>
		<view
			style="width: 100%;margin: 0 auto;background-color: #fff;padding:0rpx 17px 17px 17px;border-radius:30rpx ;"
			>
			<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom" v-show="title == '商城商家'">
				<view class="_left text-blod">商家类型<text class="color-red">*</text></view>
				<view class="_right text-cut  text-cut  text-right" @click="openPicker('industry')">
					<text class="text-bf" v-if="!industryVal.id">商家类型</text>
					<text>{{ industryVal.name }}</text>
					<text class="cuIcon-right margin-left-sm"></text>
				</view>
			</view>
			<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom" v-show="title == '医院商家'">
				<view class="_left text-blod">主营类目<text class="color-red">*</text></view>
				<view class="_right text-cut  text-cut  text-right" @click="openPicker('popup')">
					<text class="text-bf wd200" v-show="!category">主营类目</text>
					<text>{{ category }}</text>
					<text class="cuIcon-right margin-left-sm"></text>
				</view>
				<!-- <uni-data-checkbox multiple v-model="checkValue" :localdata="range" @change="checkChange"></uni-data-checkbox> -->
			</view>
			<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
				<view class="_left text-blod">商家名称<text class="color-red">*</text></view>
				<view class="_right text-cut  text-cut  text-right"><input type="text" placeholder="2~7个汉字或字母"
						v-model="info.store_name" placeholder-class="placeholder" maxlength="16" /></view>
			</view>
			<!-- <view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center solid-bottom">
      <view class="_left">
        城市分站
      </view>
      <view class="_right text-cut  text-cut  text-right" @click="openPicker('city')">
        <text class="text-bf" v-if="!cityVal.id">请选择城市分站</text>
        <text v-else>{{cityVal.name}}</text>
        <text class="cuIcon-right margin-left-sm"></text>
      </view>
    </view> -->
			<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
				<view class="_left text-blod">所在地区<text class="color-red">*</text></view>
				<view class="_right text-right flex align-center">
					<view @click="openPicker('region')" class="address text-cut">
						<text class="text-bf" v-if="!addr">请选择</text>
						<text class="text-333" v-else>{{ addr }}</text>
					</view>

					<view class="cuIcon-locationfill text-lg padding-left-sm" @click="location"></view>
					<!-- <text class="cuIcon-right margin-left-xs"></text> -->
				</view>
			</view>

			<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
				<view class="_left text-blod">详细地址<text class="color-red">*</text></view>
				<view class="_right text-cut  text-cut  text-right"><input type="text" placeholder="请输入"
						v-model="info.store_address" placeholder-class="placeholder" maxlength="65" /></view>
			</view>
			<view class="shop-item bg-white padding-tb  text-df  justify-between align-center solid-bottom">
				<view class="_left  text-blod">
					门头照片/logo<text class="color-red">*</text>
				</view>
				<view class="text-right flex justify-start align-end">
					<!-- <view class="up-img" v-if="!info.store_logo" @click="upLoadImg('logo')"></view> -->
					<image src="../../static/upload-logo.png" mode="" class="up-img2" v-if="!info.store_logo"
						@click="upLoadImg('logo')"></image>
					<view class="img-wrap " v-else>
						<text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('logo')"></text>
						<image class="img" :src="store_logo" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="text-blod" style="margin: 60rpx 34rpx 34rpx 10rpx;font-size: 36rpx;">资质信息</view>
		<view
			style="width: 100%;margin: 0 auto;background-color: #fff;padding:0rpx 17px 17px 17px;border-radius:30rpx;">
			<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
				<view class="_left text-blod">真实姓名<text class="color-red">*</text></view>
				<view class="_right text-right">
					<input type="text" placeholder="请输入" v-model="info.contacts_name" 
						placeholder-class="placeholder" @input="onInput"/></view>
			</view>
			<!-- <view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
			<view class="_left">联系人手机</view>
			<view class="_right text-right">
				<input type="number" maxlength="11" placeholder="请输入手机号" v-model="info.contacts_phone"
					placeholder-class="placeholder" />
			</view>
		</view> -->
			<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
				<view class="_left text-blod">身份证号<text class="color-red">*</text></view>
				<view class="_right text-right"><input type="idcard" placeholder="请输入" v-model="info.idcard_no"
						placeholder-class="placeholder" /></view>
			</view>
			<view class="shop-item bg-white padding-tb  text-df flex justify-between align-center solid-bottom">
				<view class="_left">
					<view class="text-blod">国徽面<text class="color-red">*</text></view>
					<view style="margin-top: 10rpx;">请上传身份证国徽面</view>
				</view>

				<view class="_right text-right flex justify-end">
					<image src="../../static/upload-img.png" class="up-img" @click="upLoadImg( 'perPositive')"
						v-if="!perPositiveThumb.id"></image>
					<view class="img-wrap" v-else>
						<text class="cuIcon-roundclosefill text-666 text-lg close"
							@click="clearImg('perPositive')"></text>
						<image class="img" :src="perPositiveThumb.path" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="shop-item bg-white padding-tb  text-df flex justify-between align-center solid-bottom">
				<view class="_left">
					<view class="text-blod">人像面<text class="color-red">*</text></view>
					<view style="margin-top: 10rpx;">请上传身份证人像面</view>
				</view>
				<!-- <view class="_left">请上传身份证人像面</view> -->
				<view class="_right text-right flex justify-end">
					<image src="../../static/upload-img.png" class="up-img" @click="upLoadImg('perOtherSide')"
						v-if="!perOtherSideThumb.id"></image>
					<view class="img-wrap" v-else>
						<text class="cuIcon-roundclosefill text-666 text-lg close"
							@click="clearImg('perOtherSide')"></text>
						<image class="img" :src="perOtherSideThumb.path" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="shop-item bg-white padding-tb  text-df flex justify-between align-center solid-bottom">
				<!-- <view class="_left text-blod">手持证件*</view>
				<view class="_left">请上传手持身份证</view> -->
				<view class="_left">
					<view class="text-blod">手持证件<text class="color-red">*</text></view>
					<view style="margin-top: 10rpx;">请上传手持身份证</view>
				</view>
				<view class="_right text-right flex justify-end">
					<image src="../../static/upload-img.png" class="up-img" @click="upLoadImg('scIdcardSide')"
						v-if="!scIdcardSideThumb.id"></image>
					<view class="img-wrap" v-else>
						<text class="cuIcon-roundclosefill text-666 text-lg close"
							@click="clearImg('scIdcardSide')"></text>
						<image class="img" :src="scIdcardSideThumb.path" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view v-if="store_type != 3" class="shop-item bg-white padding-tb  text-df  justify-between align-center solid-bottom">
				<view class="_left text-blod">营业执照 <text class="color-red">*</text></view>
				<view class="_left" style="width: 100%;margin-top: 10rpx;">经营范围需包含相关资质</view>
				<view class="text-right flex justify-start">
					<image src="../../static/upload-img.png" class="up-img2" @click="upLoadImg('license')"
						v-if="!licenseThumb.id"></image>
					<view class="img-wrap" v-else>
						<text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('license')"></text>
						<image class="img" :src="licenseThumb.path" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="shop-item bg-white padding-tb  text-df  justify-between align-center solid-bottom">
				<view class="_left text-blod">其他证明文件</view>
				<view class="_left" style="width: 100%; margin-top: 10rpx">相关认证证书等其他证明材料</view>
				<view class="text-right flex justify-start">
					<image src="../../static/upload-img.png" class="up-img2" @click="upLoadImg('certificateSide')"
						v-if="!certificateSideThumb.id"></image>
					<view class="img-wrap" v-else>
						<text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('certificateSide')"></text>
						<image class="img" :src="certificateSideThumb.path" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-wrap  justify-between align-center margin-tb-xl margin-lr">
			<view class="agreement">
				<image class="image" @click="handle_select" v-if="is_select_agree" src="../../../user/static/checked.png">
				</image>
				<image class="image" @click="handle_select" v-else src="../../../user/static/unchecked.png"></image>
				<view>我已阅读并同意 <text style="color: #4E8CEE;">《商家规范》</text></view>
			</view>
			<!-- <view class="btn" @click="handlerPre">上一步</view> -->
			<view class="btn active" @click="handlerNext">提交审核</view>
		</view>
		<!-- 城市分站 -->
		<w-picker :visible.sync="visible" mode="selector" :value="cityVal.name" default-type="name"
			:default-props="defaultProps" :options="cityList" @confirm="onConfirm($event, 'city')" @cancel="onCancel"
			ref="city"></w-picker>
		<!-- 主营行业 -->
		<w-picker :visible.sync="visible" mode="selector" :value="industryVal.name" default-type="name"
			:default-props="defaultProps" :options="industryList" @confirm="onConfirm($event, 'industry')"
			@cancel="onCancel" themeColor="#FC6497" ref="industry"></w-picker>
		<!-- category -->
		<!-- 主营行业  -->
		<!-- <w-picker :visible.sync="visible" mode="selector" :value="industryVal.name" default-type="name"
			:default-props="defaultProps" :options="industryList" @confirm="onConfirm($event, 'industry')"
			@cancel="onCancel" themeColor="#FC6497" ref="industry"></w-picker> -->
		<!-- 入驻时长 -->
		<w-picker :visible.sync="visible" mode="selector" :value="timeVal.name" default-type="name"
			:default-props="defaultProps" :options="timeList" @confirm="onConfirm($event, 'time')" @cancel="onCancel"
			themeColor="#FC6497" ref="time"></w-picker>
		<!-- 地址 -->
		<w-picker mode="region" :value="defVal" default-type="label" themeColor="#FC6497"
			@confirm="onConfirm($event, 'region')" ref="region">请选择省市区</w-picker>
		<!-- 时间选择 -->
		<w-picker :visible.sync="visible" mode="time" :current="true" :second="false"
			@confirm="onConfirm($event, 'times')" @cancel="onCancel" :disabled-after="false" ref="times"
			themeColor="#FC6497"></w-picker>
		<!-- <view class="" v-show="maskShow">
			<view class="mask">
				
			</view>
		</view> -->
		<uni-popup ref="popup"  type="bottom">
			<view class="category">
				<view class="header">
					<view class="left" @click="colseCategory">
						取消
					</view>
					<view class="center">
						选择主营类目
					</view>
					<view class="right" @click="confirmCategory">
						确定
					</view>
				</view>
				<view class="center-box start">
					<view class="list" 
						v-for="(item,index) in range" 
						:key="index" 
						:class="checkValue.includes(item.aid) ? 'active' : ''"
						@click="handleCategory(item)"
					>
						{{item.name}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// @see 引入验证，上传图片
	import {
		UploadImage,
		validate
	} from '@/common/utils/index';
	import wPicker from '../../components/w-picker/w-picker.vue';
	// 高德地图sdk
	import amapFile from '../../static/libs/amap-wx.js';
	export default {
		data() {
			return {
				store_type:1,
				body: '',
				is_select_agree: false,
				// 营业执照
				licenseThumb: {},
				// 法人身份证正面
				positiveThumb: {},
				// 法人身份证反面
				otherSideThumb: {},
				// 个人身份证正面
				perPositiveThumb: {},
				// 个人身份证反面
				perOtherSideThumb: {},
				//手持身份证
				scIdcardSideThumb:{},
				//资质证明
				certificateSideThumb:{},
				title: "",
				title2: "",
				visible: false,
				defaultProps: {
					label: 'name',
					value: 'id'
				},
				cityVal: {}, //城市
				cityList: [{
					id: 1,
					name: '全国'
				}],
				industryVal: {}, //主营行业
				industryList: [],
				timeVal: {}, //城市
				timeList: [{
					id: 1,
					name: '一年'
				}],
				info: {
					store_name: '', //店铺名称
					store_level: '', //开店套餐
					main_industry: '', //主营行业
					stay_time: '', //入驻时长
					service_money: '', //服务费
					store_logo: '', //店铺logo
					run_type: 1, // 经验方式   1自营 2 非自营
					store_backdrop: '', // 店铺背景
					store_province_id: '', // 省code
					store_city_id: '', // 市code 
					store_district_id: '', // 区code
					store_province_name: '', // 省
					store_city_name: '', // 市
					store_district_name: '', // 区
					store_address: '',
					store_introduce: '',
					service_phone: '',
					business_hours: '', // 营业时间
					workday: '', // 工作日
					idcard_sc:'',//手持身份证,
					qualification_certificate:"",
					category_ids: '',  // 主营行业新
				},
				addr: '', //地址
				store_logo: '',
				store_bg: '',
				defVal: [], // 默认地址
				myAmapFun: null, // 高德地图实例
				workDayList: [{
						id: 1,
						isdo: false,
						name: '星期一'
					},
					{
						id: 2,
						isdo: false,
						name: '星期二'
					},
					{
						id: 3,
						isdo: false,
						name: '星期三'
					},
					{
						id: 4,
						isdo: false,
						name: '星期四'
					},
					{
						id: 5,
						isdo: false,
						name: '星期五'
					},
					{
						id: 6,
						isdo: false,
						name: '星期六'
					},
					{
						id: 7,
						isdo: false,
						name: '星期日'
					}
				],
				start_time: '',
				end_time: '',
				time_type: 'start',
				range: [],
				checkValue: [],
				category: ''
			};
		},
		computed: {
			money() {
				let year_money = this.industryVal.money || 0;
				// let num = this.timeVal.id || 0;
				// let total = (year_money*num).toFixed(2);
				return year_money;
			},
			total() {
				let year_money = this.industryVal.money || 0;
				let num = this.timeVal.id || 0;
				let total = this.info.service_money * num;
				let t = Number(total) + Number(year_money);
				// if (!total) t = 0;
				return t.toFixed(2);
			}
		},
		onLoad(option) {
			// 初始化高德地图SDK,记得换成自己的key
			this.myAmapFun = new amapFile.AMapWX({
				key: 'da1c01509a0dbea0bff1d85d45edc378'
			});
			// 自动定位当前地址
			// this.autoGetLocation();
			this.get_store_apply();
			this.title = option.title;
			this.title2 = option.title2;
			this.store_type= option.type;
		},
		methods: {
			handleCategory(item) {
				if(this.checkValue.includes(item.aid)) {
					// splice
					this.checkValue.splice(this.checkValue.indexOf(item.aid), 1)
				} else {
					this.checkValue.push(item.aid)
				}
				// this.checkValue.includes(item.aid) ? 
			},
			confirmCategory() {
				let name = this.range.map(item =>{
					if(this.checkValue.includes(item.aid)) {
						return item.name
					} else {
						return ''
					}
				})
				this.info.category_ids = this.checkValue.toString()
				this.category = name.toString().replace(',','、')
				console.log(this.category, 'iii')
				this.$refs.popup.close()
			},
			colseCategory() {
				this.$refs.popup.close()
			},
			onInput(e) {
				// 使用正则表达式匹配非中文字符并将其替换为空字符串/[^\u4E00-\u9FA5]/g
				const o = e.target;
				// 数字和字母
				const inputRule =/[^\u4E00-\u9FA5]/g;  //修改inputRule 的值
				this.$nextTick(function() {
						 this.info.contacts_name = o.value.replace(inputRule , '');
				})
				// this.info.contacts_name = event.target.value.replace(/[^\u4E00-\u9FA5]/g, '');
				// console.log('快快快', event)
			},
			handle_select() {
				this.is_select_agree = !this.is_select_agree
			},
			// 选择工作日
			handlerWeek(item) {
				this.workDayList.forEach(val => {
					if (val.id == item.id) val.isdo = !val.isdo;
				});
			},
			// 选择自营 非自营
			handlerManagement(type) {
				this.info.run_type = type;
			},
			/**
			 * @description 上传收款二维码
			 */
			upLoadImg(type) {
				console.log(type,"$$$$$$$$$$$$$$$$$$$$")
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						console.log(res);
						let list = res.tempFilePaths;
						list.forEach((val, i) => {
							this.uploadUserImg(val, type);
						});
					}
				});
			},
			/**
			 * @description 上传图片
			 */
			uploadUserImg(blob, type) {
				// uni.showLoading();
				let _this = this;
				// 开始上传
				new UploadImage([blob], {
					complete: res => {
						console.log(res,type,"**************1");
						if (res.length) {
							if (type == 'logo') {
								this.info.store_logo = res[0].id;
								this.store_logo = res[0].path;
							}
							if (type == 'bg') {
								this.info.store_backdrop = res[0].id;
								this.store_bg = res[0].path;
							}
							if (type == 'license') {
								this.licenseThumb = res[0];
								this.info.business_licence = res[0].id;
							}
							if (type == 'positive') {
								this.positiveThumb = res[0];
								this.info.idcard_front = res[0].id;
							}
							if (type == 'otherSide') {
								this.otherSideThumb = res[0];
								this.info.idcard_reverse = res[0].id;
							}
							if (type == 'perPositive') {
								this.perPositiveThumb = res[0];
								this.info.idcard_front = res[0].id;
								console.log(res[0],"*************************");
							}
							if (type == 'perOtherSide') {
								this.perOtherSideThumb = res[0];
								this.info.idcard_reverse = res[0].id;
							}
							if (type == 'scIdcardSide') {
								this.scIdcardSideThumb = res[0];
								this.info.idcard_sc = res[0].id;
							}
							if (type == 'certificateSide') {
								this.certificateSideThumb = res[0];
								this.info.qualification_certificate = res[0].id;
							}
						}
					}
				});
			},
			clearImg(type) {
				if (type == 'logo') {
					this.info.store_logo = '';
					this.store_logo = '';
				}
				if (type == 'bg') {
					this.info.store_backdrop = '';
					this.store_bg = '';
				}
				if (type == 'license') {
					this.licenseThumb = {};
					this.info.business_licence = '';
				}
				if (type == 'positive') {
					this.positiveThumb = {};
					this.info.idcard_front = '';
				}
				if (type == 'otherSide') {
					this.otherSideThumb = {};
					this.info.idcard_reverse = '';
				}
				if (type == 'perPositive') {
					this.perPositiveThumb = {};
					this.info.idcard_front = '';
				}
				if (type == 'perOtherSide') {
					this.perOtherSideThumb = {};
					this.info.idcard_reverse = '';
				}
				if (type == 'scIdcardSide') {
					this.scIdcardSideThumb = {};
					this.info.idcard_sc = "";
				}
				if (type == 'certificateSide') {
					this.scIdcardSideThumb = {};
					this.info.qualification_certificate = "";
				}
			},
			get_store_apply() {
				let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
				let store_user_id = uni.getStorageSync('store_user_id') || 0;
				this.$api
					.post(
						global.apiUrls.get_store_apply, {}, {
							header: {
								Storeid: store_joinin_id,
								Userid: store_user_id
							}
						}
					)
					.then(res => {
						console.log(res);
						if (res.data.code == 1) {
							this.industryList = res.data.data.main_industry;
							this.info.store_level = res.data.data.store_level;
							this.info.service_money = res.data.data.service_money;
							this.range = res.data.data.category
							console.log(this.range, 'this.range')
							// .map(item =>{
							// 	item.text = item.name;
							// 	item.value = item.aid;
							// 	return item
							// });
							let stay_time = res.data.data.stay_time;
							let timeList = [];
							for (let attr in stay_time) {
								timeList.push({
									id: attr,
									name: stay_time[attr]
								});
							}
							this.timeList = timeList;
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 上一步
			handlerPre() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 下一步
			handlerNext() {
				// console.log(this.info);
				if (!this.is_select_agree) return this.$message.info('请阅读并同意以上协议');
				let info = this.info;
				let regAliyun = /^(?:1[2-9]\d{9}|[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/;
				let code = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
				// .test(value)
				if(!code.test(this.info.idcard_no)) {
					return this.$message.info('身份证格式错误');
				}
				let nikeName = /[\u4e00-\u9fa5]{0,10}/
				if(!nikeName.test(this.info.contacts_name)) {
					return this.$message.info('姓名只支持中文');
				}
				if(!this.category) {
					return this.$message.info('请选择主营类目');
				}
				// 
				// let regEmoji =  /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/g
				if (!info.store_name.trim()) return this.$message.info('请填写店铺名称');
				if (!info.store_logo) return this.$message.info('请上传店铺logo');
				
				
				if(!this.perOtherSideThumb ||!this.perOtherSideThumb.path) return this.$message.info('请上传身份证人像面');
				if(!this.perOtherSideThumb ||!this.perPositiveThumb.path) return this.$message.info('请上传身份证国徽面');
				if(!this.scIdcardSideThumb || !this.scIdcardSideThumb.path) return this.$message.info('请上传手持身份证');
				if((!this.licenseThumb || !this.licenseThumb.path) && this.store_type != 3) return this.$message.info('请上传营业执照');
				// if (!info.store_backdrop) return this.$message.info('请上传店铺背景');
				// if(!regEmoji.test(info.store_name)){
				// 	this.$message.info('名称不能输入表情');
				// 		return
				// 	}
				
				if (!info.main_industry && this.title == '商城商家') return this.$message.info('请选择分类');
				if(this.title != '商城商家') {
					// info.main_industry = 
				}
				// if (!info.stay_time) return this.$message.info('请选择入驻时长');
				let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
				let store_user_id = uni.getStorageSync('store_user_id') || 0;
				if (!info.store_province_name || !info.store_city_name || !info.store_district_name) {
					return this.$message.info('请选择店铺所在地地址');
				}
				if (!info.store_address) return this.$message.info('请输入详细地址');
				// this.info.run_type
				// this.info.run_type = this.title2
				// if (!info.store_introduce) return this.$message.info('请输入店铺简介');
				// let workday = []
				// this.workDayList.forEach(item => {
				// 	if (item.isdo) workday.push(item.id)
				// })
				// if (workday.length > 0) {
				// 	info.workday = workday.join(',')
				// } else {
				// 	return this.$message.info('请选择工作日');
				// }

				// if (this.start_time && this.end_time) {
				// 	info.business_hours = this.start_time + '-' + this.end_time
				// } else {
				// 	return this.$message.info('请选择营业时间范围');
				// }
				// if (!info.service_phone) return this.$message.info('请输入客服电话');
				console.log(info)
				this.$api
					.post(global.apiUrls.store_info, info, {
						header: {
							Storeid: store_joinin_id,
							Userid: store_user_id
						}
					})
					.then(res => {
						console.log(res);
						if (res.data.code == 1) {
							uni.reLaunch({
								url: '/shop/shop/shop-success/index'
							});
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 打开弹窗
			openPicker(type, time_type) {
				if (type == 'times') {
					this.time_type = time_type;
					if (!this.start_time && time_type == 'end') return this.$message.info('请先选择开始时间');
				}
				if(type == 'popup') {
						this.$refs[type].open()
						return 
				}
				this.$refs[type].show();
				
			},
			onCancel() {},
			onConfirm(res, type) {
				console.log(res, type);
				if (type == 'city') {
					this.cityVal = res.obj;
				}
				if (type == 'industry') {
					this.industryVal = res.obj;
					this.info.main_industry = res.obj.id;
				}
				if (type == 'time') {
					this.timeVal = res.obj;
					this.info.stay_time = res.obj.id;
				}
				if (type == 'region') {
					this.info.store_province_name = res.obj.province.label;
					this.info.store_city_name = res.obj.city.label;
					this.info.store_district_name = res.obj.area.label;
					this.info.store_province_id = res.value[0];
					this.info.store_city_id = res.value[1];
					this.info.store_district_id = res.value[2];
					this.addr = res.result;
					if (res.obj.province.label == res.obj.city.label) this.addr = res.obj.city.label + res.obj.area.label;
				}
				if (type == 'times') {
					if (this.time_type == 'start') this.start_time = res.value;
					if (this.time_type == 'end') {
						let obj = res.value.split(':');
						let start_time_arr = this.start_time.split(':');
						let flag = true;
						if (Number(obj[0]) < Number(start_time_arr[0])) flag = false;
						if (Number(obj[0]) == Number(start_time_arr[0])) {
							if (Number(obj[1]) <= Number(start_time_arr[1])) flag = false;
						}
						if (flag) this.end_time = res.value;
						else this.$message.info('结束时间不能小于开始时间');
					}
				}
			},
			/**
			 * @func 定位地址
			 */
			location() {
				let _this = this;
				//#ifdef MP-WEIXIN
				uni.getSetting({
					success(res) {
						// 获取设置成功
						console.log(res.authSetting);
						if (!res.authSetting.userLocation) {
							// 如果没开启权限提示打开
							uni.openSetting({
								success(res) {
									// 打开成功，提示获取权限
									console.log(res.authSetting);
									uni.authorize({
										scope: 'scope.userLocation',
										success(res) {
											_this.chooseLocation();
										},
										fail(res) {
											console.log(res);
											this.$message.info('打开权限失败');
										}
									});
								}
							});
						} else {
							_this.chooseLocation();
						}
					}
				});
				//#endif
				this.chooseLocation();
			},
			/**
			 * @func 地图选点
			 */
			chooseLocation() {
				uni.chooseLocation({
					success: res => {
						console.log(res, '地图');
						this.myAmapFun.getRegeo({
							location: res.longitude + ',' + res.latitude,
							success: data => {
								//成功回调
								console.log('sdk回调', data);
								let regeoData = data[0].regeocodeData.addressComponent;
								let province = regeoData.province;
								let city = Array.isArray(regeoData.city) && regeoData.city
									.length == 0 ? regeoData.province : regeoData.city;
								let district = regeoData.district;

								this.info.store_province_name = province;
								this.info.store_city_name = city;
								this.info.store_district_name = district;
								// 详细地址是否含有省市区
								let addr = province + city + district;

								// 直辖市
								if (province == city) addr = province + district;
								this.addr = addr;
								let addrInfo = res.address;
								if (addrInfo.startsWith(addr)) addrInfo = addrInfo.replace(addr,
									'');
								if (addrInfo != res.name) this.info.store_address = addrInfo + res
									.name;
								else this.info.store_address = addrInfo;
								this.info.store_province_id = regeoData.adcode.substr(0, 2) +
									'0000';
								this.info.store_city_id = regeoData.adcode.substr(0, 4) + '00';
								this.info.store_district_id = regeoData.adcode + '';
							},
							fail: info => {
								//失败回调
								console.log(info);
							}
						});
					}
				});
			},
			/**
			 * @func 自动定位
			 */
			autoGetLocation() {
				console.log('auto ');
				uni.getLocation({
					geocode: true,
					success: adr => {
						console.log(adr);
						// #ifdef APP-PLUS
						let address = adr.address;
						let province = address.province;
						let city = Array.isArray(address.city) && address.city.length == 0 ? address.province :
							address.city;
						let district = address.district;
						this.addr = address.street + address.streetNum + address.poiName;

						this.info.store_province_name = province;
						this.info.store_city_name = city;
						this.info.store_district_name = district;
						this.store_address = address.street + address.streetNum + address.poiName;
						// #endif
						// #ifndef APP-PLUS
						this.myAmapFun.getRegeo({
							location: adr.longitude + ',' + adr.latitude,
							success: data => {
								//成功回调
								console.log('sdk回调', data);
								let regeoData = data[0].regeocodeData.addressComponent;
								let province = regeoData.province;
								let city = Array.isArray(regeoData.city) && regeoData.city
									.length == 0 ? regeoData.province : regeoData.city;
								let district = regeoData.district;

								this.info.store_province_name = province;
								this.info.store_city_name = city;
								this.info.store_district_name = district;
								this.store_address = data[0].desc;
								// console.log(this.province + this.city + this.district + this.store_address);
							},
							fail: info => {
								//失败回调
								console.log(info);
							}
						});
						// #endif
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wd200 {
		width: 200rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.category {
		width: 100vw;
		height: 950rpx;
		padding: 0 24rpx 120rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		.header {
			height: 110rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				font-size: 30rpx;
				color: #999;
			}
			.center{
				font-weight: 500rpx;
				font-size: 30rpx;
				color: #000;
				
			}
			.right {
				font-size: 30rpx;
				color: #4E8CEE;
			}
		}
		.center-box {
			overflow-y: auto;
			.list {
				margin-top: 20rpx;
				margin-right: 20rpx;
				width: 220rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #F7F7F7;
				border-radius: 40rpx;
				border: 1px solid #F7F7F7;
			}
			.active {
				border: 1px solid #4E8CEE;
				background: rgba(78,140,238,0.08);
			}
		}
		.start {
		  display: flex;
		  flex-direction: row;
		  justify-content: flex-start;
		  align-items: center;
		}
	}
	// .mask {
	// 	// position: ;
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	right: 0;
	// 	bottom: 0;
	// 	background: #000;
	// 	opacity: 0.6;
	// 	z-index: ;
	// }
	.color-red {
		color: red;
		font-size: 40rpx;
		margin-left: 10rpx;
	}

	.page {
		padding: 0 32rpx;
		background-color: linear-gradient(180deg, #E6F0FF 0%, #FFFFFF 100%);
	}

	.height-100 {
		height: 100rpx;
	}

	.placeholder {
		color: #bfbfbf;
		font-size: 28rpx;
	}

	.text-bf {
		color: #bfbfbf;
	}

	.up-img2 {
		margin-top: 30rpx;
		width: 150rpx;
		height: 150rpx;
		// border: 1px dashed #eeeeee;
		position: relative;

		&.bg {
			width: 240rpx;
			height: 135rpx;
		}

		// &::before {
		// 	content: '';
		// 	width: 60rpx;
		// 	height: 4rpx;
		// 	background: #eeeeee;
		// 	position: absolute;
		// 	top: 50%;
		// 	left: 50%;
		// 	transform: translate(-50%, -50%);
		// }

		// &::after {
		// 	content: '';
		// 	width: 4rpx;
		// 	height: 60rpx;
		// 	background: #eeeeee;
		// 	position: absolute;
		// 	top: 50%;
		// 	left: 50%;
		// 	transform: translate(-50%, -50%);
		// }
	}

	.img-wrap {
		width: 150rpx;
		height: 150rpx;
		border: 1px dashed #eeeeee;
		position: relative;
		margin-top: 30rpx;

		&.bg {
			width: 375rpx;
			height: 135rpx;
		}

		.close {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			z-index: 111;
		}

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.shop-item {
		textarea {
			width: 100%;
			height: 200rpx;
			background: #f8f9f9;
			padding: 16rpx;
		}

		._left {
			width: 300rpx;
			position: relative;

			// &::after {
			// 	content: '*';
			// 	position: absolute;
			// 	left: -12rpx;
			// 	font-size: 28rpx;
			// 	color: red;
			// }

			&.none {
				&::after {
					content: '';
					position: absolute;
					left: -12rpx;
					font-size: 28rpx;
					color: red;
				}
			}
		}

		._right {
			width: calc(100% - 300rpx);

			.address {
				width: calc(100% - 52rpx);
			}

			.up-img {
				width: 150rpx;
				height: 150rpx;
				// border: 1px dashed #eeeeee;
				position: relative;

				&.bg {
					width: 240rpx;
					height: 135rpx;
				}

				// &::before {
				// 	content: '';
				// 	width: 60rpx;
				// 	height: 4rpx;
				// 	background: #eeeeee;
				// 	position: absolute;
				// 	top: 50%;
				// 	left: 50%;
				// 	transform: translate(-50%, -50%);
				// }

				// &::after {
				// 	content: '';
				// 	width: 4rpx;
				// 	height: 60rpx;
				// 	background: #eeeeee;
				// 	position: absolute;
				// 	top: 50%;
				// 	left: 50%;
				// 	transform: translate(-50%, -50%);
				// }
			}

			.img-wrap {
				width: 150rpx;
				height: 150rpx;
				border: 1px dashed #eeeeee;
				position: relative;


				&.bg {
					width: 375rpx;
					height: 135rpx;
				}

				.close {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					z-index: 111;
				}

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.cuIcon-squarecheckfill,
			.cuIcon-roundcheckfill {
				color: $bgtheme;
			}
		}
	}

	.btn-wrap {
		padding-bottom: 60rpx;

		.btn {
			// width: 300rpx;
			// height: 88rpx;
			// line-height: 88rpx;
			// text-align: center;
			// font-size: 28rpx;
			// color: $theme;
			// background: #ffffff;
			// border-radius: 44rpx;
			// border: 1px solid $theme;

			// &.active {
			// 	background: $bgtheme;
			// 	color: #ffffff;
			// }
			height: 88rpx;
			line-height: 88rpx;
			background: $bgtheme;
			opacity: 1;
			border-radius: 14rpx;
			margin: 30rpx 0rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			font-family: PingFang SC;
			font-weight: 500;
			text-align: center;
		}
	}

	.jindu {
		width: 220rpx;
		height: 14rpx;
		background: #4E8CEE;
		border-radius: 14rpx 0px 0px 14rpx;
		margin-top: 20rpx;
	}

	.jindu2 {
		background: #4E8CEE;
		border-radius: 0px;
		margin: 20rpx 5px 0 5px;
	}

	.jindu3 {
		background: #4E8CEE;
		border-radius: 0px 14rpx 14rpx 0px;
	}

	.wz {
		display: block;
		margin-top: 10px;
		font-size: 28rpx;
	}

	.text-blod {
		font-weight: bold;
		color: #333;
	}
	.agreement {
		display: flex;
		width: 100%;
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #666666;
		align-items: center;
		justify-content: left;
		margin: 30rpx 0;
	
		.image {
			height: 28rpx;
			width: 28rpx;
			margin-right: 12rpx;
		}
	
		text {
			color: #999999;
		}
	}
</style>